<template>
  <div>
    <!-- 列表 -->
    <el-table :data="pageList" row-key="id" v-loading="initLoading">
      <el-table-column prop="goods_name" label="商品" width="380">
        <template #default="scope">
          <div class="flex">
            <el-avatar :src="scope.row.goods_image" :size="40" shape="square" />
            <div class="ml10">
              <div class="goods-name">{{ scope.row.goods_name }}</div>
              <div class="text-red">￥{{ scope.row.goods_price }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="goods_stock"
        label="库存"
        align="center"
        width="180"
      />
      <el-table-column prop="type" label="商品类型" />
      <el-table-column align="center" label="操作" width="100">
        <template #default="scope">
          <template v-if="selectedActive == scope.row.id">
            <el-button
              type="primary"
              size="small"
              @click="selectedItemClick(scope.row)"
              >选取</el-button
            >
          </template>
          <template v-else>
            <el-button size="small" @click="selectedItemClick(scope.row)"
              >选取</el-button
            >
          </template>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="flex end">
      <page :listPage="listPage" @change="pageChange"></page>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "selectGoodsRadio",
};
</script>
  <script setup lang="ts">
import { ref, getCurrentInstance, watch, onMounted } from "vue";
import { listPageType, Result, ResultError } from "@/types";
import { useConfig } from "@/store";
import { getGoodsSimpleList } from "@/api/store/goods";

const configStore = useConfig();

const props = withDefaults(
  defineProps<{
    selectItem?: any;
  }>(),
  {
    selectItem: {},
  }
);

const {
  proxy: { $utils },
} = getCurrentInstance() as any;

const initLoading = ref<boolean>(true);

const pageList = ref<any>([]);

const toInit = () => {
  let obj: any = {};
  obj.page = listPage.value.page;
  obj.limit = listPage.value.limit;
  initLoading.value = true;
  getGoodsSimpleList(obj)
    .then((res: Result) => {
      initLoading.value = false;
      pageList.value = res.data.data;
      listPage.value.total = res.data.total;
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

const pageChange = (res: listPageType) => {
  listPage.value = res;
  toInit();
};

const listPage = ref<listPageType>({
  total: 0,
  limit: configStore.getPageLimit,
  page: 1,
});

const emit = defineEmits(["change"]);

const selectedActive = ref<number | string>(props.selectItem?.id || 0);

const selectedItem = ref<any>(props.selectItem);

const selectedItemClick = (item: any) => {
  selectedActive.value = item.id;
  selectedItem.value = item;
  emit("change", selectedItem.value);
};
onMounted(() => {
  toInit();
});
</script>

<style scoped>
.goods-name {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>